import React, { Component, PropTypes } from "react";
import { connect } from 'react-redux'
import {Icon, Tabs} from 'antd'
import ConcurrentMark from "containers/expense-report/template/concurrent-mark";
import { messages } from "share/common";
import CertificatePreview from "containers/financial-management/new-finance-audit/certificate-preview";
import ApproveHistory from "components/template/approve-history";
import SlideLoanLine from "./slide-loan-line";
import SlideLoanRefund from "./slide-loan-refund";
const { TabPane } = Tabs;

@connect(mapStateToProps)
class SlideLoanRight extends Component {

  state = {
    activeTab: 'loan'
  };

  render() {
    const { isAuditInApproveStatus, info, approverOID, templateCodeList, applicant, pathname, auditFlag } = this.context;
    const { loginUser } = this.props;
    const { activeTab } = this.state;
    let isRefund = (~pathname.indexOf('borrow-management') || ~pathname.indexOf('loan-and-refund'))
      && ~[1005, 1006, 1007].indexOf(info.status);
    return (
      <div className="slide-expense-report-detail-right">
        <Tabs
          activeKey={activeTab}
          tabBarExtraContent={auditFlag ? (
            <div className="slide-expense-report-detail-right-audit-ing">
              <Icon type="clock-circle" /> {messages('finance-1.key123')/*自动审核中请等待*/}
            </div>
          ) : null}
          className="right-tabs"
          onChange={activeTab => this.setState({ activeTab })}
        >
          <TabPane tab={messages('finance-1.key124')/*借款计划*/} key='loan'>
            <SlideLoanLine/>
          </TabPane>
          {
            isRefund && (
              <TabPane tab={messages('finance-1.key125')/*还款明细*/} key='refund'>
                <SlideLoanRefund/>
              </TabPane>
            )
          }
          <TabPane tab={messages('finance-1.key62')/*审批历史*/} key='history'>
            <div className='slide-expense-report-detail-history'>
              <ApproveHistory
                approvalChains={info.approvalChains}
                isShowReply={info.status === 1003}
                businessCode={info.businessCode}
                approvalHistory={info.approvalHistorys}
                applicantInfo={applicant}
              />
            </div>
          </TabPane>
          {
            templateCodeList.length && (
              <TabPane tab={messages('finance-1.key63')/*凭证预览*/} key='preview'>
                <CertificatePreview
                  templateCodeList={templateCodeList}
                  bookDate={info.bookDate}
                  bookDateType={info.bookDateType}
                  params={{
                    businessCode: info.businessCode,
                    entityType: 3001,
                    setOfBooksId: info.setOfBooksId,
                    operatorOid: loginUser.userOID,
                    forceRefresh: false
                  }}
                />
              </TabPane>
            )
          }
        </Tabs>
        <ConcurrentMark
          entityOID={info.loanBillOID}
          isWaitForApprove={info.status === 1002}
          approverOID={approverOID}
          approvalChains={info.approvalChains || []}
          isAuditInApproveStatus={isAuditInApproveStatus}
        />
      </div>
    )
  }

  static contextTypes = {
    info: PropTypes.object,
    isAuditInApproveStatus: PropTypes.bool,
    approverOID: PropTypes.string,
    templateCodeList: PropTypes.array,
    pathname: PropTypes.string,
    applicant: PropTypes.object,
    auditFlag: PropTypes.bool
  };

}

function mapStateToProps (state) {
  return ({
    loginUser: state.login.loginUser
  })
}

export default SlideLoanRight
